import LTable from "@/components/public/lTable/lTable";
import { defineComponent, ref, reactive, computed } from "vue";
import useNavigator from "@/hooks/useNavigator";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import $roleChooseChannelService from "@/modules/permission/roleChooseChannel.service";
import styles from "./chooseChannel.module.less";
export default defineComponent({
  emits: ['cancel', 'confirm'],
  setup(props, { emit }) {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: [
          "refresh",
        ],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          align: "center",
          width: "100px",
        },
        {
          title: "用户名",
          dataIndex: "username",
          align: "center",
          width: "100px",
        },
        {
          title: "渠道名称",
          dataIndex: "name",
          align: "center",
          width: "180px",
        },
        {
          title: "负责人姓名",
          dataIndex: "realname",
          align: "center",
          width: "100px",
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          align: "center",
          width: "100px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "150px",
        },
      ],
      loading: false,
      query: {
        not_in_admin_id: navigator.route?.query?.id || '',
      },
      searchForm: {
        id: {
          type: "input",
          label: "ID",
          attrs: { placeholder: "请输入ID" },
        },
        name: {
          type: "input",
          label: "渠道名称",
          attrs: { placeholder: "请输入渠道名称" },
        },
        realname: {
          type: "input",
          label: "负责人姓名",
          attrs: { placeholder: "请输入负责人姓名" },
        },
        username: {
          type: "input",
          label: "负责人用户名",
          attrs: { placeholder: "请输入负责人用户名" },
        },
        phone: {
          type: "input",
          label: "手机号",
          attrs: { placeholder: "请输入手机号" },
        },
        create_start_time: {
          type: "date",
          label: "创建时间",
          attrs: { placeholder: "请选择创建时间" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5,
      },
      selectedRowKeys: [],
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (record: any) => {
      let id = record.id;
      state.selectedRowKeys.includes(id) ? state.selectedRowKeys.splice(state.selectedRowKeys.findIndex((x: any) => x === id), 1) : state.selectedRowKeys.push(id);
    };
    // 所有选中项变更
    const onSelectAllChange = (selected: boolean, selectedRows: any[], changeRows: any[]) => {
      if(selected) {
        changeRows.forEach(x => {
          state.selectedRowKeys.push(x.id)
        })
      } else {
        changeRows.forEach(x => {
          state.selectedRowKeys.splice(state.selectedRowKeys.findIndex((y: any) => y === x.id), 1)
        })
      }
    }
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onSelect: onSelectChange,
        onSelectAll: onSelectAllChange,
      };
    });
    const $service = new $roleChooseChannelService();
    const LTableRef = ref(null as any);
    return () => (
      <div style={{ width: "100%", padding: "15px" }}>
        <LTable
          ref={LTableRef}
          service={$service}
          toolbar={state.toolbar}
          v-model={state}
        >
          <a-table
            bordered={true}
            scroll={{ x: "max-content" }}
            dataSource={state.dataSource}
            columns={state.columns}
            pagination={state.pagination}
            onChange={tableChangeHandler}
            row-selection={rowSelection.value}
            loading={state.loading}
            rowKey="id"
            v-slots={{
              bodyCell: ({ column, record }: any) => {
                if (column.dataIndex === "status") {
                  return (
                    Number(record.status) ? <CircleStateTitle title="正常" type="success" /> : <CircleStateTitle title="停用" type="danger" />
                  )
                }
              },
            }}
          />
        </LTable>
        <div class={styles.btns}>
          <a-button onClick={() => { emit('cancel') }}>取消</a-button>
          <a-button type="primary" onClick={() => { emit('confirm', state.selectedRowKeys) }}>确定</a-button>
        </div>
      </div>
    )
  },
})